<template>
  <div class="personeelDialog">
    <el-dialog
      title="人员选择"
      :visible.sync="isVisible"
      width="50%"
      custom-class="bodyNoPadDialog bigDialog"
      :close-on-click-modal="false"
      @close="close"
    >
      <div class="dialogDody">
        <div class="flexs" style="height: 100%;overflow-y: hidden">
          <div class="orgBox">
            <div class="title">人员管理</div>
            <div class="pl16 subTtile" :class="isDefault?'crt':''" @click="isDepartClick?getAllEmployee():''"><i class="iconfont memberIco mr5" />全部人员</div>
            <div class="title">组织架构</div>
            <div class="pl16 noBorderSelect">
              <i class="iconfont buildIco mr5" style="color: #666" />
              <el-select v-model="search.organizationCode" placeholder="请选择" size="mini" @change="changeOrg">
                <el-option
                  v-for="item in organizations"
                  :key="item.orgCode"
                  :label="item.orgName"
                  :value="item.orgCode"
                />
              </el-select>
            </div>
            <div v-loading="treeLoading" class="departmentCon pl10">
              <el-tree
                ref="departTree"
                :data="departData"
                :props="customProps"
                node-key="departmentCode"
                highlight-current
                :expand-on-click-node="false"
              >
                <div
                  slot-scope="{ node, data }"
                  class="custom-tree-node flex"
                  @click="isDepartClick?currentDepart(data):''"
                >
                  <span><i class="iconfont folderIco mr5" style="color: #83A0FF;" />{{ node.label }}</span>
                </div>
              </el-tree>
            </div>
          </div>
          <div v-loading="tableLoading" class="flex1 selectedPer">
            <div class="title flex flex_between">
              <span class="fw f16">全部人员</span>
              <div class="search">
                <el-input
                  v-model="search.likeWords"
                  placeholder="输入关键字"
                  size="small"
                >
                  <el-button
                    slot="append"
                    v-loading="!isDepartClick"
                    type="primary"
                    icon="el-icon-search"
                    :disabled="!isDepartClick"
                    element-loading-spinner="el-icon-loading"
                    @click="getEmplyee"
                  >
                    搜索
                  </el-button>
                </el-input>
              </div>
            </div>
            <div class="perList">
              <ul v-if=" employeeDatas.length>0">
                <li v-for="(item, index) in employeeDatas" :key="index" class="flexs" :class="item.isChecked?'crt':''" @click="selecedPer(item,index)">
                  <div class="head">
                    <!-- <img :src="item.headImageUrl" alt="" v-if="item.headImageUrl"> -->
                    <userHead :name="item.employeeName" :sex="item.employeeSexName" :size="44"/>
                    <!-- <i class="el-icon-user-solid" style="font-size:35px;color:#999" ></i> -->
                    <!-- <span class="sexBg flex flex_column flex_center" :class="item.employeeSex===2?'girlbg':''">{{ item.employeeSexWord }}</span> -->
                  </div>
                  <div class="flex1 flex flex_between show">
                    <div class="flex1">
                      <div class="c_333333 fw">{{ item.employeeName }}</div>
                      <div>{{ item.organizationName }}/{{ item.departmentName }}</div>
                    </div>
                    <div v-if="item.isChecked">
                      <i class="el-icon-check c_3F61F1 f18"></i>
                    </div>
                  </div>
                </li>
              </ul>
              <div v-else>
                <el-empty description="当前条件下，没有员工" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isVisible = false">取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="savePer"
        >确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import userHead from '@/components/UserHead'
import {
    mapGetters
  } from "vuex";
export default {
  name: '',
  props: {
    perVisible: {
      type: Boolean,
      required: false
    },
    perSelect: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components:{
    userHead
  },
  data() {
    return {
      organizations: [], // 所有组织架构(公司)
      isDefault: true,
      isDepartClick: true,
      tableLoading: false, // 人员列表加载中
      treeLoading: false, // 部门加载中
      customProps: {
        label: 'departmentName',
        children: 'children'
      },
      // 员工列表搜索条件
      search: {
        likeWords: '',
        organizationCode: '',
        departmentCode: ''
      },
      selectData: [], // 选中人员
      crtIndex: null,
      employeeDatas: [],
      departData: [] // 当前组织架构对应得部门
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
    isVisible: {
      get() {
        return this.perVisible
      },
      set(val) {
        this.$emit('update:perVisible', val)
      }
    }
  },
  watch:{
    isVisible: {
      handler(newVal, oldVal) {
        this.selectData = []
        if(newVal === true){
          console.log(this.userInfo)
          this.getOrganization()
          // 匹配人员列表
          this.getEmplyee()
        }
      },
    },
  },
  created() {
    this.selectData = this.selectData.concat(this.perSelect)
    //  获取所有组织架构
    

      this.getOrgDepart()
  },
  mounted() {
  },
  methods: {
    // 确定选中该人员
    savePer() {
      if(!this.selectData ||this.selectData.length<1){
        this.$message.warning('请选择人员')
        return
      }
      this.$emit('getEmployee', this.selectData)
      this.isVisible = false
    },
    // 人员选择
    selecedPer(item) {
      item.isChecked = !item.isChecked
      const isChecked = this.selectData.some((m) => m.employeeCode === item.employeeCode)
      if (!isChecked) {
        this.selectData.push(item)
      } else {
        const index = this.selectData.findIndex((x) => x.employeeCode === item.employeeCode)
        this.selectData.splice(index, 1)
      }
    },
    // 全部人员
    getAllEmployee() {
      this.isDefault = true
      this.$refs.departTree.setCurrentKey(null)
      this.search = this.$options.data().search
      this.departData = this.$options.data().departData
      this.getEmplyee()
    },
    // 选择组织机构
    changeOrg() {
      this.isDefault = false
      this.search.departmentCode = ''
      this.getOrgDepart()
      this.getEmplyee()
    },
    // 当前部门下面得所有员工
    currentDepart(data) {
      this.search.departmentCode = data.departmentCode
      this.isDefault = false
      // 获取所有员工列表
      this.getEmplyee()
    },
    // 获取某个组织架构下得所有部门列表
    getOrgDepart() {
      const parmas = {
        orgCode: this.search.organizationCode
      }
      this.treeLoading = true
      this.$api.user.getOrgDepart(parmas).then(res => {
        this.departData = res
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },
    // 获取所有组织架构
    getOrganization() {
      this.$api.user.getAllOrganizations().then(res => {
        this.organizations = res
        this.search.organizationCode = res[0].orgCode
        this.getOrgDepart()
      })
    },
    // 匹配人员列表
    getEmplyee() {
      const parmas = this.search
      this.isDepartClick = false
      this.tableLoading = true
      this.$api.user.queryEmployee(parmas).then(res => {
        const newArr = JSON.parse(JSON.stringify(res))
        newArr.forEach((m,index) => {
          // const checked = this.selectData.some((item) => item.employeeCode === m.employeeCode)
          // if (checked) {
          //   m.isChecked = true
          // } else {
          //   m.isChecked = false
          // }
          m.isChecked = false
        })
        this.employeeDatas = newArr.filter((item)=>{ return item.employeeCode != this.userInfo.employeeCode})
        this.isDepartClick = true
        this.tableLoading = false
      }).catch(() => {
        this.isDepartClick = true
        this.tableLoading = false
      })
    },
    // 弹框关闭得时候
    close() {

    }
  }
}
</script>
<style lang="scss" scoped>
.orgBox {
  width: 35%;
  border-right: 1px #eee solid;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
  padding-bottom: 80px;
  .title{
    font-size: 16px;
    font-weight: bold;
    padding: 16px;
  }
  .subTtile{
    padding: 10px 16px;
    cursor: pointer;
    &:hover{
      background: #3f61f110;
      color: #3f61f1;
    }
  }
  .subTtile.crt{
    background: #3f61f110;
    color: #3f61f1;
  }
}
.selectedPer{
  width:  65%;
  .perList{
    overflow-y: auto;
    height: 100%;
    padding-bottom: 80px;
  }
  .title{
    padding: 16px 16px;
    border-bottom: 1px solid #eee;
  }
  li{
    cursor: pointer;
    padding:14px 16px;
    position: relative;
    &::after{
      content: "";
      position: absolute;
      left: 70px;
      bottom: 0;
      right: 0;
      border-bottom: 1px #eee solid;
    }
    &:last-child::after{
      border-bottom: none;
    }
  }
  .crt{
    background: #3f61f110;
  }
  .head{
    width: 44px;
    height: 44px;
    border-radius: 100%;
    border: 1px #f2f2f2 solid;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .sexBg{
      width: 20px;
      height: 20px;
      border-radius: 100%;
      background: #3f61f1;
      border: 2px #fff solid;
      position: absolute;
      right: -6px;
      bottom: -6px;
      font-size: 12px;
      color: #fff;
    }
    .sexBg.girlbg{
      background: #ff66b2;
    }
    img{
      width: 44px;
      height: 44px;
      border-radius: 100%;
    }
  }
  .show{
    margin-left: 12px;
    line-height: 25px;
    font-size: 12px;
    color: #999;
  }
}
</style>
